<el-header style="height: auto; padding: 0">
    <!-- 语言 -->
    <!-- {if $muli_lang}
    <el-row type="flex" justify="end">
        <el-col :span="4" style="text-align: center;">
            <el-dropdown style="z-index: 9; top: 150px;">
                <span>
                    {$lang == 'en' ? 'English' : '简体中文'}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><a href="{:url('index/changeLang', ['lang' => 'zh-cn'])}">简体中文</a></el-dropdown-item>
                    <el-dropdown-item><a href="{:url('index/changeLang', ['lang' => 'en'])}">English</a></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
    </el-row>
    {/if} -->

    <!-- 导航 mobile -->
    <el-row type="flex" justify="space-between" class="menu-mobile">
        <el-col :span="5">
            <!-- logo mobile -->
            <div class="logo-container">
                <el-link href="/" :underline="false" class="noline">
                    <img src="{$site.weblogo|cdnurl}" alt="Logo" class="logo" />
                </el-link>
            </div>
        </el-col>
        <!-- 导航 mobile -->
        <el-col :span="5" class="text-center">
            <el-button @click="drawer = true" type="text">
                <i class="el-icon-s-fold f-s-30"></i>
            </el-button>
            <el-drawer :visible.sync="drawer" size="60%">
                <!-- 一级菜单项 S -->
                <el-menu class="text-left">
                    <template v-for="(item, index) in menuItems" :key="index">
                        <el-submenu v-if="item.subMenus" :index="item.index">
                            <template slot="title">
                                <el-link :href="item.href">
                                    {{ item.title }}
                                </el-link>
                            </template>
                            <el-menu-item-group v-for="(subItem, subItemIndex) in item.subMenus"
                                :key="subItemIndex">
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item v-for="(grandItem, grandItemIndex) in subItem.subMenus"
                                    :key="grandItemIndex" :index="grandItem.index">
                                    <el-link :href="grandItem.href" :underline="false">
                                        {{ grandItem.title }}
                                    </el-link>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-menu-item v-else :index="item.index">
                            <span slot="title">
                                <el-link :href="item.href">
                                    {{ item.title }}
                                </el-link>
                            </span>
                        </el-menu-item>
                    </template>
                </el-menu>
                <!-- 一级菜单项 E -->
            </el-drawer>
        </el-col>
    </el-row>
    <!-- logo pc -->
    <div class="logo-container menu-pc">
        <el-link href="/" :underline="false" class="noline">
            <img src="{$site.weblogo|cdnurl}" alt="Logo" class="logo" />
        </el-link>
    </div>
    <!-- 导航 pc -->
    <el-row type="flex" justify="center" class="m-t-30 menu-pc">
        <el-col :span="12" :offset="4">
            <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" background-color="#fff"
                text-color="#000" active-text-color="#7D948B" class="header-menu">
                <!-- 一级菜单项 S -->
                <template v-for="(item, index) in menuItems" :key="index">
                    <el-submenu v-if="item.subMenus" :index="item.index">
                        <template #title>
                            <el-link :href="item.href">
                                {{ item.title }}
                            </el-link>
                        </template>
                        <!-- 二级 S -->
                        <el-row type="flex" justify="center">
                            <el-col :span="4" v-for="(subItem, subItemIndex) in item.subMenus" :key="subItemIndex">
                                <el-col :span="24" v-if="subItem.subMenus">
                                    <span class="subTitle">{{ subItem.title }}</span>
                                    <!-- 三级 S -->
                                    <el-col :span="24" v-for="(grandItem, grandItemIndex) in subItem.subMenus"
                                        :key="grandItemIndex">
                                        <el-link :href="grandItem.href" :underline="false"
                                            :class="grandItem.index.indexOf('all-products') > -1 ? 'subTitle' : 'grandTitle'">{{ grandItem.title
                                            }}</el-link>
                                    </el-col>
                                    <!-- 三级 E -->
                                </el-col>
                                <el-col v-else :span="24">
                                    {{ subItem.title }}
                                </el-col>
                            </el-col>
                        </el-row>
                        <!-- 二级 E -->
                    </el-submenu>
                    <el-menu-item v-else :index="item.index">
                        <template #title>
                            <el-link :href="item.href">
                                {{ item.title }}
                            </el-link>
                        </template>
                    </el-menu-item>
                </template>
                <!-- 一级菜单项 E -->
            </el-menu>
        </el-col>
        <el-col :span="2" :offset="4">
            <!-- 语言 -->
            {if $muli_lang}
                {if $lang == 'en'}
                <el-link href="{:url('index/changeLang', ['lang' => 'zh-cn'])}" :underline="false" class="noline"><span class="lang-icon">简体中文</span></el-link>
                {else /}
                <el-link href="{:url('index/changeLang', ['lang' => 'en'])}" :underline="false" class="noline"><span class="lang-icon">English</span></el-link>
                {/if}
            {/if}
            <!-- 语言 E -->
        </el-col>
    </el-row>
</el-header>